<!DOCTYPE html>
<html>
<head>
	<title>react-props</title>
    <meta charset="UTF-8" />
	<script src='../node_modules/react/umd/react.development.js'></script>
	<script src='../node_modules/react-dom/umd/react-dom.development.js'></script>
    <script src='../node_modules/babel-standalone/babel.min.js'></script>
</head>
<body>
    <div id="my"></div>
    <script type="text/babel">
    const comment = {
        date: new Date(),
        text: 'I hope you enjoy learning React!',
        author: {
          name: 'Hello Kitty',
          avatarUrl: 'http://placekitten.com/g/64/64'
        }
      };
    /*1、使用函数定义一个组件 需要显示传递props */
    function Img(props){
        return <img src={props.infoSrc.avatarUrl} />
    };
    
    function formatDate(date){
        return date.toLocaleDateString()
    };
    function App(props){
        return (
           <div className="div1">
             <p>{formatDate(props.date)}</p>
             <p>{props.text}</p>
             <Img infoSrc={props.author} />
         </div> 
        )
    };

     ReactDOM.render(
         <App date={comment.date} text={comment.text} author={comment.author}/>,
        document.getElementById('my')
    )
    </script>
</body>
</html>